<template>
  <div>
    <div class="shop-content">
        <div class="container">
        <!-- 当前位置导航 -->
          <div class="current-location">
           <div>当前位置：</div>
           <a href="/">首页</a>&gt;<a href="/">{{shop_data.data[0].type_id==1 ? '狗狗':'猫猫'}}商城</a>&gt;<a href="/">宠物详情页</a> 
          </div>
          <!-- 宠物详情介绍 -->
          <div class="pet-intro">
            <div class="pet-img">
            <img src="../assets/img/petdog01.jpg" alt="">
           </div>
            <div class="pet-information" v-if="shop_data">
               <span>{{shop_data.data[0].psex}}{{shop_data.data[0].pet_type}}</span>
               <!-- <span style="">{{shop_data.data[0].pet_type}}</span> -->
               <div>
                <span>{{shop_data.data[0].pvaccine==0?'未驱虫':'已驱虫'}}</span>
                <span>{{shop_data.data[0].pgrade}}</span>
                <span>{{shop_data.data[0].pname}}</span>
               </div>
               <div>【官方推荐】∶16年专注活体销售，完善的购买流 程，良好的售后体系</div>
               <div>¥{{shop_data.data[0].price}}</div>
               <!-- 配送 -->
               <div>
                <ul>
                    <li>配送：</li>
                    
                    <li><img src="../assets/img/PetDeI02.png" alt="">
                        <span>自提</span>
                        <span>0元</span>
                     </li>
                     <li><img src="../assets/img/PetDeI03.png" alt="">
                        <span>汽运</span>
                        <span>200元</span>
                     </li>
                     <li><img src="../assets/img/PetDeI04.png" alt="">
                        <span>空运</span>
                        <span>500元</span>
                     </li>
                </ul>
                <ul>
                    <li>  服务：</li>
                  
                    <li><img src="../assets/img/PetDeI04.png" alt="">
                        <span>100%实拍</span>
                     </li>
                     <li><img src="../assets/img/PetDeI04.png" alt="">
                        <span>先行赔付</span>
                     </li>
                 
                </ul>
               </div>
               <!-- 疫苗状况 -->
               <ul class="vacc" v-if="shop_data">
                    <li>
                        <span>绝育</span>
                        <span>{{shop_data.data[0].psterilization}}</span>
                    </li>
                    <li>
                        <span>疫苗</span>
                        <span>{{shop_data.data[0].pet_insect_repellent}}次</span>
                    </li>
                    <li>
                        <span>驱虫</span>
                        <span>{{shop_data.data[0].pvaccine}}次</span>
                    </li>
                    <li>
                        <span>年龄</span>
                        <span>9月20天</span>
                    </li>
               </ul>
               <!-- 按钮区 -->
               <ul class="pet-btn">
                <li><button class="btn1">立即购买</button></li>
                <li><button class="btn2">登录练习</button></li>
                <li><img src="../assets/img/PetDeI05.png" alt=""><span>收藏</span></li>  
                <li><img src="../assets/img/PetDeI06.png" alt=""><span>举报</span></li>
               </ul>
            </div>
          </div>
          <!-- 商家信息区 -->
          <div class="business-infor">
            <div class="bus-content">
                <!-- 详细介绍 -->
                <div class="bus-intro">
                     <!-- 头像 -->
                    <div>
                        <img src="../assets/img/head-pic1.png" alt="">
                    </div>
                    <div>
                            <ul>
                                <li>精品精宠</li>
                                <li><span>已交押金</span></li>
                                <li><span>平台认证</span></li>
                                <li><span>实地考察</span></li>
                            </ul>
                            <span>地址：中国重庆市重庆市渝北区嘉洲路</span>
                    </div>
                </div>
                <!-- 商家跳转 -->
                <div class="bus-jump">
                    <!-- 星星评价 -->
                    <ul>
                        <li><img src="../assets/img/star02.png" alt=""></li>
                        <li><img src="../assets/img/star02.png" alt=""></li>
                        <li><img src="../assets/img/star02.png" alt=""></li>
                        <li><img src="../assets/img/star01.png" alt=""></li>
                        <li><img src="../assets/img/star01.png" alt=""></li>
                    </ul>
                    <div>
                    <router-link :to="`/store?uid=${shop_data.data[0].uid}`">进入店铺</router-link>
                        <!-- 二维码 -->
                        <img src="../assets/img/ftM.jpg" alt="">
                    </div>
                </div>

            </div>
          </div>
          <!-- 品种介绍区 -->
         <div  class="pet-bread-zong">
            <!-- 品种详情 -->
            <div class="pet-breed">
                <div class="breed-first">
                    <span>宠物详情</span> 
                    <span></span>
                </div>
                <div class="breed-now" v-if="shop_data">
                
                    <div class="petbreed-img">
                        <div>
                            <img src="../assets/img/dog_10.jpg" alt="">
                        </div>
                        <span>{{shop_data.data[0].pname}}</span>
                    </div>
                 <div  class="ul-breed">
                    <!-- 详细框1 -->
                   <div class="ul-first">
                     <ul>
                        <li>中文名:&nbsp;&nbsp;<span>{{shop_data.data[0].pname}}</span></li>
                        <li>别名:&nbsp;&nbsp;<span>{{shop_data.data[0].pname}}</span></li>
                        <li>原产地:&nbsp;&nbsp;<span>{{shop_data.data[0].origin}}</span></li>
                        <li>小型:&nbsp;&nbsp;<span>{{shop_data.data[0].shape}}</span></li>
                     </ul>
                     <div>
                        
                            <ul style="display:flex">
                                <li>粘人程度:</li>
                                <li v-for="item in shop_data.data[0].cindly" :key="item"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item1 in (5-shop_data.data[0].cindly)" :key="item1"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                        
                       
                            <ul  style="display:flex">
                                <li>掉毛程度:</li>
                                <li v-for="item2 in shop_data.data[0].hairfalling" :key="item2"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item3 in (5-shop_data.data[0].hairfalling)" :key="item3"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                       
                       
                            <ul  style="display:flex">
                                <li>口水程度:</li>
                                <li v-for="item4 in shop_data.data[0].saliva" :key="item4"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item5 in (5-shop_data.data[0].saliva)" :key="item5"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                        
                       
                            <ul  style="display:flex">
                                <li>喜叫程度:</li>
                                <li v-for="item6 in shop_data.data[0].cry" :key="item6"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item7 in (5-shop_data.data[0].cry)" :key="item7"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                      
                        
                            <ul  style="display:flex">
                                <li>美容程度:</li>
                                <li v-for="item8 in shop_data.data[0].cosmetology" :key="item8"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item9 in (5-shop_data.data[0].cosmetology)" :key="item9"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                       
                     </div>
                   </div> 
                   <!-- 详细框2 -->
                   <div  class="ul-second">
                    
                    <ul>
                        <li>身高:&nbsp;&nbsp;<span>{{shop_data.data[0].height_range}}cm</span></li>
                        <li>体重:&nbsp;&nbsp;<span>{{shop_data.data[0].weight_range}}kg</span></li>
                        <li>寿命:&nbsp;&nbsp;<span>{{shop_data.data[0].life_age}}年</span></li>
                       
                     </ul>
                     <div>
                       
                            <ul  style="display:flex">
                                <li>友善程度:</li>
                                <li v-for="item10 in shop_data.data[0].friendly" :key="item10"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item11 in (5-shop_data.data[0].friendly)" :key="item11"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                       
                       
                            <ul  style="display:flex">
                                <li>体味程度:</li>
                                <li v-for="item12 in shop_data.data[0].taste" :key="item12"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item13 in (5-shop_data.data[0].taste)" :key="item13"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                      
                       
                            <ul  style="display:flex">
                                <li>活跃程度:</li>
                                <li v-for="item14 in shop_data.data[0].actively" :key="item14"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item15 in (5-shop_data.data[0].actively)" :key="item15"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                       
                       
                            <ul  style="display:flex">
                                <li>可训程度:</li>
                                <li v-for="item16 in shop_data.data[0].train" :key="item16"><img src="../assets/img/star02.png" alt=""></li>
                                <li v-for="item17 in (5-shop_data.data[0].train)" :key="item17"><img src="../assets/img/star01.png" alt=""></li>
                            </ul>
                       
                     </div>
                   </div>
                 </div>
                </div>
                <!-- 警告 -->
                <div class="pet-warn">
                    <div class="pet-warn-img">
                        <div>
                            <img src="../assets/img/tanhao.png" alt="">
                        </div>
                        <span>危险</span>
                    </div>
                    <span></span>
                    <div class="pet-warn-content">
                      <span>买家双方私下交易造成自身任何权益损害，所产生的交易纠纷与平台无关。</span>
                      <span> 商家被用户举报，一经证实做永久封号处理，并保留追究造成损失的权利。</span> 
                    </div>
                    
                </div>
                <!-- 具体情况区域 -->
                <div class="pet-specific-information" v-if="shop_data">
                  <ul>
                    <li>
                        <span>编号：</span>
                        <span>5468865653266258622</span>
                    </li>
                    <li>
                        <span>生日：</span>
                        <span>9月24天</span>
                    </li>
                    <li>
                        <span>发布：</span>
                        <span>2021-12-17</span>
                    </li>
                    <li>
                        <span>绝育：</span>
                        <span>{{shop_data.data[0].psterilization}}</span>
                    </li>
                    <li>
                        <span>疫苗：</span>
                        <span>{{shop_data.data[0].pet_insect_repellent}}次</span>
                    </li>
                    <li>
                        <span>驱虫：</span>
                        <span>{{shop_data.data[0].pvaccine}}次</span>
                    </li>
                    <li>
                        <span>描述：</span>
                        <span>{{shop_data.data[0].introduce}}</span>
                    </li>
                  </ul>
                </div>
                <!-- 你可能感兴趣 -->
                <div class="pet-interested">
                    <div>你可能感兴趣</div>
                    <div>
                        <button>{{shop_data.data[0].pname}}价格</button>
                        <button>重庆卖狗的地方</button>
                        <button>重庆在那里买狗不较好</button>
                    </div>
                </div>
            </div>
            <!-- 猜你喜欢 -->
            <div class="pet-others">
                <div class="breed-first">
                    <span>猜你喜欢</span> 
                    <span></span>
                </div>
                <div class="other-first">
                    <ul v-if="pro_data">
                        <li><img src="../assets/img/petdog02.jpg" alt="" @click="$router.push(`/pet_detail?cid=${pro_data.data[0].cid}`)"></li>
                        <li><span>{{pro_data.data[0].pvaccine==0?'未驱虫':'已驱虫'}}的{{pro_data.data[0].pgrade}}{{pro_data.data[0].pname}}</span></li>
                        <li><span>【官方推荐】∶16年专注活体销售，完善的购买流 程，良好的售后体系</span></li>
                        <li><span>￥{{pro_data.data[0].price}}</span></li>
                    </ul>
                </div>
                <div class="other-second">
                    <ul v-if="pro_data">
                        <li><img src="../assets/img/petdog02.jpg" alt="" @click="$router.push(`/pet_detail?cid=${pro_data.data[1].cid}`)"></li>
                        <li><span>{{pro_data.data[1].pvaccine==0?'未驱虫':'已驱虫'}}的{{pro_data.data[1].pgrade}}{{pro_data.data[1].pname}}</span></li>
                        <li><span>【官方推荐】∶16年专注活体销售，完善的购买流 程，良好的售后体系</span></li>
                        <li><span>￥{{pro_data.data[1].price}}</span></li>
                    </ul>
                </div>
            </div>
         </div>
        </div>
    </div> 
  </div>
</template>

<script>
import '../assets/css/reset.css'
  export default {
    data() {
        return {
            shop_data: null,
            pro_data:null,
            
        }
    },
    watch:{
        $route(){
            this.getShopDetail() 
        }
    },
    methods: {
        getShopDetail() {
            const url=`/v1/pet_shop/shop_detail?cid=${this.$route.query.cid}`
            this.axios.get(url).then(res=>{
                this.shop_data=res.data 
                 console.log(this.shop_data);  
            })
        },
        getProDetail() {
            const url="/v1/pet_shop/pro_detail"
            this.axios.get(url).then(res=>{
                this.pro_data=res.data 
               console.log('商品数据：',res);
            })
        },
     
    },
    mounted(){
        this.getShopDetail(),
        this.getProDetail()
    }
  }
</script>

<style lang="scss" scoped>
</style>
<style src="../assets/css/petdetail.css">
</style>